<template>
  <view class="max_box">
    <!-- ------------------------ 顶车型swiper**start ------------------------ -->
    <view class="swiper-top__ware" :style="{ 'height': posterH }">
      <!-- tag 栏 -->
      <scroll-view scroll-x="true" class="car-tab" :style="{ top: `calc(${carTabTop})` }" :scroll-left="scrollLeft">
        <view class="car-tab__itme" :class="{ 'currItem': item.pI == currentCart }" v-for="(item, i) in tagList"
          :key="item.id" @click="clickCarTab(item)"> {{ item.ve_name }}</view>
      </scroll-view>
      <!-- 二副标签 -->
      <view class="second-level-tab" :style="{ top: `calc(${carTabTop} + 80rpx)` }" v-if="currCarsDetails.ve_id == 80">
        <view class="tab-item" :class="{ 'currItem': m.index == swiperIndex }" v-for='(m, i  ) in secondLevelTab'
          :key='m.id' @click="clickSecondLevel(m)">
          {{ m.vem_name }}
        </view>
      </view>
      <view class="car-subhead" :style="{ top: `calc(${carTabTop} + 80rpx + 18px + 42rpx)` }">
        <view class="car-subhead__img">
          <image class="img" :src="logo2Img" mode="aspectFill"></image>
        </view>
        <view class="car-subhead__name"> {{ currCarsDetails.title }}</view>
      </view>
      <!-- ------------------------ 背景图**start ------------------------ -->
      <swiper :current="swiperIndex" @change="swiperChange" class="swiper-top" :indicator-dots="false" :interval="2000"
        :duration="500">
        <swiper-item v-for="item  in  carModelList " :key="item.id">
          <view class="swiper-item">
            <image class="img" mode="aspectFill" :src="item.vem_coverImg"></image>
          </view>
        </swiper-item>
      </swiper>
      <view class="car-param__b">
        <!-- ------------------------ 参数**start ------------------------ -->
        <view class="car-param">
          <view class="car-param__itme" v-for="( item, i ) in  currCarsParam " :key="item.id">
            <view class="car-param__itme--vaue">{{ item.prop_valCtt }}</view>
            <view class="car-param__itme--name"> {{ item.prop_name }}</view>
          </view>
        </view>
        <view class="car-logo">
          <view class="car-logo__img">
            <image class="img" :src="currCarsLogo.prop_valCtt" mode="aspectFit"></image>
          </view>
        </view>
        <view class="konw-more" @click="goContact">瞭解更多</view>
        <uni-icons custom-prefix="iconfont2" color="#fafafa" type="icon-_xiafangxiang" size="19"
          class=" arrow1"></uni-icons>
        <uni-icons custom-prefix="iconfont2" color="#fafafa" type="icon-_xiafangxiang" size="20"
          class=" arrow2"></uni-icons>
      </view>

      <view class="tip-ware">
        <view class="tip" v-if="showCarsArea">*該車型僅澳門地區銷售</view>
        <view class="tip">*左右軚規格和功能可能有所不同</view>
      </view>
    </view>
    <!-- ------------------------ 车型亮点**start ------------------------ -->
    <view class="car-light">
      <view class="car-light__title">車型亮點</view>
      <view class="car-light__ware">
        <view class="car-light__ware--itme" @click="previewImage(index)" v-for='( item, index ) in  currCarsLight '
          :key='item.id'>
          <view class="car-light__img-box">
            <image class="img" mode="aspectFill" :src="item.prop_valCtt"></image>
          </view>
          <view class="car-light__name">{{ item.prop_name }}</view>
        </view>
      </view>
      <template v-if="!!currCarsPdf.PdfL || !!currCarsPdf.PdfR">
        <view class="car-light__title">車型詳情</view>
        <view class="btn-ware">
          <view v-if="!!currCarsPdf.PdfL" @click="pdfLookDetail(currCarsPdf.PdfL)" :class="['veiw-detoil__btn',]">
            瞭解左軚</view>
          <view v-if="!!currCarsPdf.PdfR" @click="pdfLookDetail(currCarsPdf.PdfR)" :class="['veiw-detoil__btn',]">
            瞭解右軚</view>
        </view>
      </template>
      <!-- !currCarsPdf.PdfR ? 'is-disabled' : '' -->
    </view>
    <!-- ------------------------ 备注信息**start ------------------------ -->
    <view class="note-info">

      <view class="note-info_itme" v-for='item in currCarsNote' :key='item.id'>
        {{ item.prop_name }}

        <view class="note-info__l">
          {{ item.prop_valCtt }}
        </view>

        <!-- <view class="note-info__r"> -->
        <!-- </view> -->
      </view>
    </view>
    <!-- ------------------------ 提示添加小程序组件**start ------------------------ -->
    <AddTips :carTabTop="carTabTop"></AddTips>
    <!-- 进度条 -->
    <view class="progres_box" v-if="isProgress">
      <l-circularProgress :boxHeight="280" :boxWidth="280" :fontSize="36" :percent="progress" :lineWidth="16"
        progressColor="#ffffff" fontColor="#ffffff" bgColor="#b3b3b3">
        <!-- <view class=" text">
          <view>{{ progress }}/6</view>
          <view class="">加载进度……</view>
        </view> -->
      </l-circularProgress>
    </view>
    <CustomMask v-if="isProgress"></CustomMask>
  </view>
</template>
<script>
import { mapState } from 'vuex'
import { jnbtn } from '@/utils/utils'

import { carModelListApi, brandCarsDetails, brandCarsParamDetails } from '@/API/carSeries'
import { brand_id, imgUrlCar, tempImg, tempImg2, logo2Img, logo3Img, } from '@/static/js/staticData'
export default {
  data() {
    return {
      tempImg,
      tempImg2,
      logo2Img,
      logo3Img,
      tagList: [], // 一级
      secondLevelTab: [], // 二级
      currentCart: 0,
      swiperIndex: 0,
      carsDetails: {},//车-详情
      carsParam: {},//车-参数
      carsLight: {}, //车-亮点
      carsArea: {}, //车-地区
      carsNote: {}, //参数备注信息
      carPdf: {}, //车-Pdf
      carModelList: [],
      carTabTop: '56px',
      posterH: '100vh',
      scrollLeft: 0,
      logoList: {},
      // -------------
      bntDis: true,
      progress: 0,
      isProgress: false,
    }
  },
  onLoad(e) {
    console.log('onLoad :>> ', e)
    if (e?.vId) {
      let { vId, vmId, vVid, i, pI, inx } = e
      this.getCarModelList(vId, vmId, vVid, i, pI, inx)
    } else {
      this.getCarModelList()
    }
    // console.log(' uni.getWindowInfo() :>> ', uni.getWindowInfo());
    let { windowWidth, windowHeight } = uni.getWindowInfo()
    // console.log('windowWidth :>> ', windowWidth);
    // console.log('windowHeight :>> ', windowHeight);
    if (windowHeight > 618) {
      this.posterH = '100vh'
    } else {
      this.posterH = windowWidth * 1.7 + 'px'
    }
    let { bottom } = jnbtn()
    this.carTabTop = bottom + 'px'
    // console.log('jnbtn() :>> ', jnbtn());
  },
  methods: {
    // ------------------------ 汽车列表-开始 ------------------------
    async getCarModelList(V_ID, VM_ID, V_VID, INDEX, pI, INX) {
      const {
        data: { data }
      } = await carModelListApi({ state: 1, brand_id, sort: 'a' })
      // sort: 'a'，字母排前面。sort:'1'，数字排前面
      // 过滤掉空的
      // console.log('data-getCarModelList :>> ', data);
      let temp = []
      let tagList = []  // 一级
      let secondTab = [] // 二级
      let tempImg = this.tempImg2
      let idx = 0
      // let arrs = ["X", "001", "001", "007", "009"]
      // let temp3 = data.filter(item => arrs.includes(item.ve_name))

      for (let i = 0; i < data.length; i++) {
        let { ve_id, ve_name, ve_groups } = data[i]
        let { vem_id, vem_vid, vem_coverImg, } = ve_groups[0]
        if (vem_coverImg) {
          // console.log('ve_name :>> ', ve_name);
          tagList.push({ id: i + 1, ve_name, ve_id, vem_id, vem_vid, pI: i, index: idx })  // 一级
        }
        if (ve_id == 80) {
          for (let j = 0; j < ve_groups.length; j++) {
            let { ve_id, vem_id, vem_vid, vem_name, vem_coverImg } = ve_groups[j]
            if (vem_coverImg) {
              temp.push({ id: i + 1, ve_name, ve_id, vem_id, vem_vid, vem_coverImg: `${imgUrlCar}${vem_coverImg}`, pI: i, index: idx })
              secondTab.push({ id: j + 1, ve_id, vem_id, vem_vid, vem_name, pI: i, index: idx })
              idx++
            }
          }
        } else {
          if (vem_coverImg) {
            temp.push({ id: i + 1, ve_name, ve_id, vem_id, vem_vid, vem_coverImg: `${imgUrlCar}${vem_coverImg}`, pI: i, index: idx })
            idx++
          }
        }
      }

      this.tagList = tagList  // 一级
      this.secondLevelTab = secondTab
      this.carModelList = temp
      // console.log(' this.carModelList :>> ', temp);
      // ------------------------ 第一个列表车型(详情)**start ------------------------
      if (V_ID) {
        this.getBrandCarsDetails(V_ID, VM_ID, V_VID, INDEX)
        this.currentCart = pI
        this.swiperIndex = INX
        INX
      } else {
        let { ve_id, vem_id, vem_vid, index } = temp[0]
        this.getBrandCarsDetails(ve_id, vem_id, vem_vid, index)
      }
    },
    // 集团品牌车型(详情)
    async getBrandCarsDetails(ve_id, vem_id, vem_vid, index) {
      const {
        data: { data, code }
      } = await brandCarsDetails({ ve_id, vem_id, vem_vid, brand_id })
      console.log('data 车型详情 :>> ', index, data);
      // console.log('data-Details :>> ', data.info.model_list[0]);
      if (code == 200) {
        let { ve_style = [], info = {} } = data
        let { model_list, pdf_url = '', other_url = '' } = info
        let carInfo = model_list?.find(item => item.vem_vid == vem_vid) || {}
        this.$set(this.carsDetails, index, carInfo)
        this.$set(this.carPdf, index, { PdfL: other_url, PdfR: pdf_url })
        if (ve_style.length) {
          // 集团品牌车型(参数详情)
          this.brandCarsParamDetailsFn(ve_style[0], index)
        }
      }
    },
    // 集团品牌车型(参数详情)
    async brandCarsParamDetailsFn({ ve_id, vem_id }, index) {
      const {
        data: { data }
      } = await brandCarsParamDetails({ ve_id, vem_id, state: 1 })
      console.log('data 车型参数详情 :>> ', data);
      // 动力传动系统
      let list = data.prop_parameterValALL[0].prop_parameterVal
      let paramList = list.filter(item => item.propt_parent_id === 14300) //参数
      let lightList = list.filter(item => item.propt_parent_id === 14200) //車型亮點
      let carsArea = list.filter(item => item.propt_parent_id === 14400) //車型地区
      let logoUrl = list.find(item => item.propt_parent_id === 14500)?.prop_valCtt //logo
      let noteInfo = list.filter(item => item.propt_parent_id === 14600) //参数备注信
      let tempImg = this.tempImg
      let paramTemp = []
      for (let i = 0; i < paramList.length; i++) {//参数
        let { prop_name, prop_valCtt } = paramList[i];
        paramTemp.push({ id: i + 1, prop_name, prop_valCtt })
      }
      let lightTemp = []
      for (let i = 0; i < lightList.length; i++) {//車型亮點
        let { prop_name, prop_valCtt } = lightList[i];
        lightTemp.push({ id: i + 1, prop_name, prop_valCtt: prop_valCtt ? `${imgUrlCar}${prop_valCtt}` : tempImg })
      }
      //参数备注信息
      let noteTemp = noteInfo.map((item, i) => ({ id: i + 1, prop_name: item.prop_name, prop_valCtt: item.prop_valCtt }))
      //车-logo
      let logoTemp = { id: 1, prop_valCtt: `${imgUrlCar}${logoUrl}` }
      this.$set(this.carsParam, index, paramTemp)//车-参数
      this.$set(this.carsLight, index, lightTemp)//车-亮点
      this.$set(this.carsArea, index, carsArea)//车-亮点
      this.$set(this.logoList, index, logoTemp)//车-logo
      this.$set(this.carsNote, index, noteTemp)//参数备注信息
    },
    swiperChange(e) {
      let index = e.target.current
      // console.log('index >> ', index);
      // console.log('e :>> ', e);
      let { pI, ve_id, vem_id, vem_vid, index: inx, vem_coverImg } = this.carModelList[index]
      this.currentCart = pI
      // console.log('pI :>> ', pI);
      // console.log('carModelList888 :>> ', this.carModelList[index]);
      if (this.carsDetails?.[index]) {
      } else {
        // let { ve_id, vem_id, vem_vid } = this.carModelList[index]
        // 集团品牌车型(详情)
        this.getBrandCarsDetails(ve_id, vem_id, vem_vid, index)
      }
      this.swiperIndex = inx
      // this.shareMixin.title = this.currCarsDetails.title
      // this.shareMixin.imageUrl = vem_coverImg
      // this.shareMixin.query = `vId=${ve_id}&vmId=${vem_id}&vVid=${vem_vid}&i=${index}&pI=${pI}&inx=${inx}`
    },
    clickSecondLevel(e) {
      let { ve_id, vem_id, vem_vid, pI, index } = e
      this.swiperIndex = index
      if (this.carsDetails?.[index]) {
      } else {
        // 集团品牌车型(详情)
        this.getBrandCarsDetails(ve_id, vem_id, vem_vid, index)
      }
    },
    clickCarTab(e) {
      console.log('e :>> ', e);
      let { pI, index } = e
      this.currentCart = pI
      this.swiperIndex = index
    },
    goContact(type) { // 到客服列表
      uni.switchTab({ url: `/pages/MyInfo` })
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.currCarsLightImgs,
        current: index,
        indicator: true,
        // loop: true
      })
    },
    // 查看pdf
    pdfLookDetail(carsPdf) {
      // this.isProgress = true
      // let Interval = setInterval(() => {
      //   if (this.progress < 100) {
      //     this.progress++
      //   } else {
      //     this.progress = 0
      //     this.isProgress = false
      //     Interval = null
      //   }
      // }, 100);
      // return
      if (!this.bntDis && carsPdf) return false
      this.bntDis = false
      this.isProgress = true
      // uni.showLoading({ title: '加载中' })
      let downloadTask = wx.downloadFile({
        //下载对应文件
        url: `${imgUrlCar}${carsPdf}`, // 下载文件网络地址
        success: res => {
          let filePath = res.tempFilePath //本地文件路径
          wx.openDocument({
            filePath: filePath, // 装载对应文件的路径
            // fileType: type,   // 指定打开的文件类型 我写的固定类型 也可根据文件的后缀动态设置
            showMenu: true, // 右上角的菜单转发分享操作
            success: res => {
              console.log('打开成功')
            },
            fail: err => {
              console.log('打开失败：', err)
            },
            complete: comp => {
              this.bntDis = true
              this.isProgress = false
              // uni.hideLoading()
            }
          })
        }
      })
      downloadTask.onProgressUpdate(res => {
        this.progress = res.progress
      })
    },
  },
  // 1.发送给朋友
  onShareAppMessage(res) {
    console.log('发送给朋友 :>> ',);
    let path = `/pages/index`
    let index = this.swiperIndex
    let { pI, ve_id, vem_id, vem_vid, index: inx, vem_coverImg } = this.carModelList[index]
    let params = `vId=${ve_id}&vmId=${vem_id}&vVid=${vem_vid}&i=${index}&pI=${pI}&inx=${inx}`
    return {
      title: this.currCarsDetails.title,
      imageUrl: vem_coverImg,
      path: `${path}?${params}`,
    }
  },
  //2.分享到朋友圈
  onShareTimeline(res) {
    console.log('分享到朋友圈 :>> ',);
    let index = this.swiperIndex
    let { pI, ve_id, vem_id, vem_vid, index: inx, vem_coverImg } = this.carModelList[index]
    let params = `vId=${ve_id}&vmId=${vem_id}&vVid=${vem_vid}&i=${index}&pI=${pI}&inx=${inx}`
    return {
      title: this.currCarsDetails.title,
      path: `/pages/index`,
      imageUrl: vem_coverImg,
      query: `${params}`,
    }
  },
  computed: {
    currCarsDetails() {//车-详情
      return this.carsDetails?.[this.swiperIndex] || []
    },
    currCarsParam() {//车-参数
      return this.carsParam?.[this.swiperIndex] || []
    },
    currCarsLight() { //车-亮点
      return this.carsLight?.[this.swiperIndex] || []
    },
    currCarsArea() { //车-地区
      return this.carsArea?.[this.swiperIndex] || []
    },
    currCarsLogo() { //车-Logo
      return this.logoList?.[this.swiperIndex] || {}
    },
    currCarsNote() { //备注信息
      return this.carsNote?.[this.swiperIndex] || []
    },
    currCarsPdf() { //Pdf
      return this.carPdf?.[this.swiperIndex] || {}
    },
    showCarsArea() { //显示-仅澳门地区销售。
      return this.currCarsArea?.[1]?.prop_valCtt === 'Macau' || false
    },
    currCarsLightImgs() { //车-亮点图片
      return this.currCarsLight.map(item => item.prop_valCtt)
    },
    ...mapState(['latLog', 'groupInfo'])
  },
  watch: {
    'swiperIndex': {
      handler(newVal,) {
        if (newVal < 3) {
          this.scrollLeft = this.scrollLeft == 0 ? 1 : 0
        } else if (newVal > this.tagList.length - 3) {
          this.scrollLeft = this.scrollLeft == 500 ? 501 : 500
        } else {
          this.scrollLeft = this.tagList.length * 50
        }
      },
    }
  },
}
</script>
<style scoped lang="scss">
.max_box {
  padding-bottom: 30rpx;

  .progres_box {
    // width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
  }


}

// ------------------------ 顶车型swiper**start ------------------------
.swiper-top__ware {
  position: relative;
  margin-bottom: 50rpx;

  .second-level-tab {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: flex-start;
    z-index: 9999;

    .tab-item {
      padding-left: 30rpx;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.6);
    }

    .currItem {
      // font-weight: 600;
      color: #fff;
    }
  }

  .swiper-top {
    height: 100%;

    .swiper-item {
      position: relative;
      display: block;
      height: 100%;
      background-color: #000;
    }
  }

  .car-tab {
    width: 300px;
    white-space: nowrap;
    position: absolute;
    left: 0;
    // text-align: center;
    z-index: 999;
    width: 100%;

    &__itme {
      padding: 0 40rpx;
      display: inline-block;
      // line-height: 70rpx;
      // height: 70rpx;
      font-weight: 500;
      font-size: 42rpx;
      color: rgba(255, 255, 255, 0.6);
    }

    .currItem {
      color: #fff;
    }
  }

  .car-subhead {
    width: 100%;
    position: absolute;
    left: 0;
    text-align: center;
    z-index: 99;
    color: #fff;


    &__img {
      width: 60rpx;
      height: 60rpx;
      margin: 0 auto 48rpx auto;
      // padding-bottom: 60rpx;
    }

    &__name {
      margin-top: -10rpx;
      font-size: 40rpx;

    }
  }

  .car-param__b {
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 20rpx;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    .car-param {
      width: 100%;
      text-align: center;
      z-index: 99;
      // display: flex;
      // justify-content: initial;
      // flex-wrap: nowrap;

      &__itme {
        width: 25%;
        // width: fit-content;
        // padding: 0 40rpx;

        // flex: 1;
        display: inline-block;
        text-align: center;
        color: #fff;

        &--vaue {
          font-size: 35rpx;
          // font-weight: 600;
          line-height: 60rpx;
        }

        &--name {
          font-size: 20rpx;
        }
      }

      &__itme:nth-child(n+2) {
        border-left: #fafafa solid 2rpx;
      }
    }

    .car-logo {
      width: 100%;
      padding: 30rpx 0;
      text-align: center;
      color: #fff;
      z-index: 99;

      &__img {
        margin: 0 auto;
        width: 220rpx;
        height: 90rpx;
      }
    }

    .konw-more {
      width: 240rpx;
      font-size: 28rpx;
      border: #fff solid 1px;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
    }
  }

  .tip-ware {
    position: absolute;
    text-align: right;
    right: 15rpx;
    bottom: 20rpx;

    .tip {
      font-size: 22rpx;
      color: #fafafa;
    }
  }
}

// ------------------------ 车型亮点**start ------------------------
.car-light {
  // margin: 0 40rpx;
  padding: 0 40rpx;
  padding-bottom: 30rpx;
  background-color: #fff;

  &__title {
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 900;
    color: #000;
  }

  &__ware {
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    &--itme {
      width: 320rpx;
      margin-bottom: 20rpx;
    }
  }

  &__img-box {
    width: 100%;
    height: 180rpx;
  }

  &__name {
    // line-height: 50rpx;
    padding-top: 8rpx;
    height: 70rpx;
    font-size: 26rpx;
    font-weight: 600;
    text-align: left;
    // @include text-ellipsis() 
  }

  .btn-ware {
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .veiw-detoil__btn:nth-child(n + 2) {
      margin-left: 30rpx;
    }

    .veiw-detoil__btn {
      width: 240rpx;
      font-size: 26rpx;
      text-align: center;
      color: #fff;
      line-height: 70rpx;
      background-color: #222;
      border: 1px solid #111;
    }

    .is-disabled {
      opacity: 0.6;
    }
  }
}

.note-info {
  padding: 0 40rpx;

  // align-items: center;

  &_itme {
    display: flex;
    justify-content: flex-start;
    font-size: 22rpx;
    padding-bottom: 10rpx;
    color: #222;
  }

  &__l {
    // width: 32rpx;
  }

  &__r {
    flex: 1;
  }

  &_itme:last-child {
    padding-bottom: 30rpx;
  }
}

@keyframes moveUpDown1 {

  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.9);
    // transform: translateY(0);
  }

  50% {
    opacity: 1;
    // transform: translateY(-10rpx);
  }
}

@keyframes moveUpDown2 {

  0%,
  100% {
    opacity: 1;
    // transform: translateY(0);
  }

  50% {
    opacity: 0.2;
    transform: scale(0.9);
  }
}

.arrow1 {
  padding-top: 20rpx;
  animation: moveUpDown1 2s infinite alternate;
}

.arrow2 {
  margin-top: -22rpx;
  animation: moveUpDown2 2s infinite alternate;
}
</style>
